<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>

  <script>
		window.onload=function(){
			let cans=document.getElementById('cans');

			let cs=cans.getContext('2d');
			let rx=400,ry=400,rr=100;

				// cs.strokeRect(rx,ry,rrx,rry);
				cans.onmousemove=function(ev){
					let a=ev.offsetX-rx;
					let b=ev.offsetY-ry;
					let c=Math.sqrt(a*a+b*b);//勾股定理

					cs.clearRect(0,0,cans.width,cans.height)
					if(c<rr){
						cs.strokeStyle='red';	
						cs.arc(rx,ry,rr,0,Math.PI/180*360,true);
						cs.stroke();
					}else{
						cs.strokeStyle='blue';	
						cs.arc(rx,ry,rr,0,Math.PI/180*360,true);
						cs.stroke();
					}
				}

		}
  </script>
</body>
</html>
